<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${table.comment!}</title>
    <script src="/js/include.js"></script>
</head>
<body>
<div id="myapp">
    <table>
        <tr>
<#list table.fields as field>
            <td>
                <el-input v-model="searchForm.${field.propertyName}" size="small" placeholder="${field.comment}模糊搜索" clearable style="width: 200px;"></el-input>
            </td>
</#list>
            <td>
                <button @click="search" type="button" class="el-button filter-item el-button--success el-button--small">
                    <i class="el-icon-search"></i><span>搜索</span>
                </button>
            </td>
            <td>
                <button v-if="showButtonAdd" @click="toAdd" type="button" class="el-button el-button--primary el-button--small">
                    <i class="el-icon-plus"></i><span>新增</span>
                </button>
            </td>
        </tr>
    </table>

    <div style="margin-top: 5px;">
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                v-loading="loading">
            </el-table-column>
<#list table.fields as field>
            <el-table-column
                    prop="${field.propertyName}"
                    label="${field.comment}">
            </el-table-column>

</#list>
            <el-table-column
                    label="创建时间">
                <template slot-scope="scope">
                    {{scope.row.createdTime | dateTimeFormat('yyyy-MM-dd HH:mm:ss')}}
                </template>
            </el-table-column>

            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button title="修改" v-if="showButtonUpdate" @click="toModify(scope.row)" type="primary" icon="el-icon-edit" size="mini" ></el-button>
                    <el-button title="删除" v-if="showButtonDelete" @click="del(scope.row.id)" type="danger" icon="el-icon-delete" size="mini" ></el-button>
                </template>

            </el-table-column>

        </el-table>

        <my-el-pagination :total="pg.total" @pagination_change="pagination_change" :page_index="pg.pageNum"></my-el-pagination>
    </div>

    <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            width="55%">

        <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-editForm">
            <#list table.fields as field>
            <el-form-item label="${field.comment}" prop="${field.propertyName}">
                <el-input v-model="editForm.${field.propertyName}"></el-input>
            </el-form-item>

            </#list>
        </el-form>


        <span slot="footer" class="dialog-footer">
                &nbsp;
                <el-button type="primary" @click="submitForm">确 定</el-button>
                &nbsp;
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
    </el-dialog>

</div>
</body>
<script>
    let vm = new Vue({
        el: '#myapp',
        data: {
            pg:{},
            tableData: [],
            searchForm: {
                pageNum: 1,
                pageSize: DEFAULT_PAGE_SIZE,
<#list table.fields as field>
                ${field.propertyName}: null,
</#list>
            },
            loading: false,
            dialogVisible: false,
            dialogTitle: "",
            editForm: {},
            rules: {
            <#list table.fields as field>

                ${field.propertyName}: [{required: true, trigger: 'blur', message: '${field.comment}不能为空'}],
            </#list>
            },

        },
        methods: {
            pagination_change (item) {
                this.searchForm.pageNum = item.pageNum;
                this.searchForm.pageSize = item.pageSize;
                this.loadTableData();
            },
            submitForm() {
                let that = this;
                myConfirm("确定提交？", function () {
                    showLoading("保存中....");
                    let url = BASE_PATH + "/${table.entityPath}/update";
                    if (isEmpty(that.editForm.id)) {
                        url = BASE_PATH + "/${table.entityPath}/add";
                    }
                    Vue.delete(that.editForm, "createdTime");

                    myAjax({
                        type: "post",
                        url: url,
                        data: that.editForm,
                        isJson: true,
                        callback: function () {
                            hideLoading();
                            successMessage("提交成功！");
                            that.dialogVisible = false;
                            that.loadTableData();
                        }
                    })
                });
            },
            search() {
                this.searchForm.pageNum = 1;
                this.loadTableData();
            },
            loadTableData() {
                let that = this;
                this.loading = true;
                myAjax({
                    type: "get",
                    url: BASE_PATH + "/${table.entityPath}/list",
                    data: that.searchForm,
                    callback: function (data) {
                        that.pg = data;
                        that.tableData = data.list;
                        that.loading = false;
                    }
                });
            },

            toModify(obj) {
                this.dialogTitle = "编辑${table.comment!}";
                this.editForm = JSON.parse(JSON.stringify(obj));
                this.dialogVisible = true;
            },
            toAdd(obj) {
                this.dialogTitle = "新增${table.comment!}";
                this.editForm = {
                    id: "",
                    name: "",
                    status: this.statuses[0].value
                };
                this.dialogVisible = true;
            },
            del(id) {
                let that = this;
                myConfirm("确定删除？", function () {
                    showLoading("保存中....");
                    let settings = {
                        type: "post",
                        url: BASE_PATH + "/${table.entityPath}/delete",
                        data: {id: id},
                        callback: function () {
                            hideLoading();
                            successMessage("删除成功！");
                            that.loadTableData();
                        }
                    };
                    myAjax(settings);
                });

            },
        },
        created: function () {
            this.loadTableData();
            this.showButtonAdd = parent.checkPermissionByName("${table.comment!}添加");
            this.showButtonUpdate = parent.checkPermissionByName("${table.comment!}修改");
            this.showButtonDelete = parent.checkPermissionByName("${table.comment!}删除");
        },
    });
</script>
</html>
